<script lang="ts" setup="">
import type { UnwrapRef } from 'vue'
import { reactive, ref, toRaw } from 'vue'
import type { FormInstance } from 'ant-design-vue'
import { Form } from 'ant-design-vue'
import { openNotification } from '@/components/vNotification'

interface FormState {
	name: string
	switch: boolean
	type: string[]
	sex: string
	desc: string
}

interface Values {
	title: string
	description: string
	modifier: string
}

const labelCol = { style: { width: '150px' } },
	wrapperCol = { span: 14 }

const useForm = Form.useForm,
	rules = reactive({
		name: [{ required: true, message: '请输入姓名' }],
		switch: [{ required: false }],
		type: [{ required: true, message: '请选择类型', type: 'array' }],
		sex: [{ required: true, message: '请选择性别' }],
		desc: [{ required: true, message: '请输入描述' }],
	})

const formState: UnwrapRef<FormState> = reactive({
	name: '',
	switch: false,
	type: [],
	sex: '',
	desc: '',
})
const { resetFields, validate, validateInfos } = useForm(formState, rules)
const onSubmit = () => {
	validate()
		.then(res => {
			console.log('submit!', res)
		})
		.catch(err => {
			console.log('error!', err)
		})
}
const formRef = ref<FormInstance>()
const visible = ref(false)
const popFormState = reactive<Values>({
	title: '',
	description: '',
	modifier: '公开',
})

const onOk = () => {
	;(formRef.value as FormInstance)
		.validateFields()
		.then(values => {
			console.log('Received values of form: ', values)
			console.log('formState: ', toRaw(popFormState))
			visible.value = false
			;(formRef.value as FormInstance).resetFields()
			console.log('reset formState: ', toRaw(popFormState))
		})
		.catch(info => {
			console.log('Validate Failed:', info)
		})
}
const onCancel = () => {
	openNotification.warn(
		'当Modal配合Form使用时，无法使用Modal的"destroyOnClose"属性清除子标签，可以使用FormRef的resetFields方法实现',
	)
	// openNotification({
	// 	message: '提示',
	// 	description:
	// 		'当Modal配合Form使用时，无法使用Modal的"destroyOnClose"属性清除子标签，可以使用FormRef的resetFields方法实现',
	// })
	;(formRef.value as FormInstance).resetFields()
}
</script>

<template>
	<div>
		<a-divider>基本表单</a-divider>
		<a-form
			:model="formState"
			:label-col="labelCol"
			:wrapper-col="wrapperCol"
			:hideRequiredMark="true"
		>
			<a-form-item label="名称" v-bind="validateInfos.name" required>
				<a-input v-model:value="formState.name" />
			</a-form-item>
			<a-form-item label="开关" v-bind="validateInfos.switch" required>
				<a-switch v-model:checked="formState.switch" />
			</a-form-item>
			<a-form-item label="类型" v-bind="validateInfos.type">
				<a-checkbox-group v-model:value="formState.type">
					<a-checkbox value="1" name="type">线上</a-checkbox>
					<a-checkbox value="2" name="type">线下</a-checkbox>
				</a-checkbox-group>
			</a-form-item>
			<a-form-item label="性别" v-bind="validateInfos.sex" required>
				<a-radio-group v-model:value="formState.sex">
					<a-radio value="1">男</a-radio>
					<a-radio value="2">女</a-radio>
				</a-radio-group>
			</a-form-item>
			<a-form-item label="描述" v-bind="validateInfos.desc" required>
				<a-input v-model:value="formState.desc" type="textarea" />
			</a-form-item>
			<a-form-item :wrapper-col="{ span: 14, offset: 4 }">
				<a-button type="primary" @click="onSubmit">提交</a-button>
				<a-button style="margin-left: 10px" @click="resetFields"
					>清空
				</a-button>
			</a-form-item>
		</a-form>
		<a-divider>弹出表单</a-divider>
		<div>
			<a-button class="ml-15" type="primary" @click="visible = true"
				>弹出表单
			</a-button>
			<a-modal
				v-model:visible="visible"
				title="创建一个新的表单数据"
				ok-text="提交"
				cancel-text="清除"
				@ok="onOk"
				@cancel="onCancel"
			>
				<a-form
					ref="formRef"
					:model="popFormState"
					layout="vertical"
					name="form_in_modal"
				>
					<a-form-item
						name="title"
						label="标题"
						:rules="[
							{
								required: true,
								message: '请输入表单的标题！',
							},
						]"
					>
						<a-input v-model:value="popFormState.title" />
					</a-form-item>
					<a-form-item name="description" label="描述">
						<a-textarea v-model:value="popFormState.description" />
					</a-form-item>
					<a-form-item
						name="modifier"
						class="collection-create-form_last-form-item"
					>
						<a-radio-group v-model:value="popFormState.modifier">
							<a-radio value="public">公开</a-radio>
							<a-radio value="private">私有</a-radio>
						</a-radio-group>
					</a-form-item>
				</a-form>
			</a-modal>
		</div>
	</div>
</template>

<style lang="scss" scoped>
.collection-create-form_last-form-item {
	margin-bottom: 0;
}
</style>
